<template>
    <div class="heading">
        <div class="img">
            <img src="http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg
" alt="" height="80">
        </div>
        <div class="title">
            T0-D0 List
        </div>
    </div> 
    <div class="filed">
            <h1 class="text">~开始努力写代码了~</h1>
            <div class="form">
                <div class="input">
                    <input type="text" v-model="val" placeholder="添加要做的事儿...">
                </div>
                <button class="submit-btn">
                    <button @click="handleAdd">点击</button>
                </button>
            </div>
        </div>
</template>
<script setup>
import { ref, defineEmits } from "vue"
//声明自定义事件 完成子传父
let val = ref("")
let emit = defineEmits(['add'])
let handleAdd = () => {
    emit('add', val.value)
}
</script>
<!-- 样式 -->
<style scoped>
.heading{
    align-items: center;
    display: flex;
    justify-content: center;
}
.title{
    background: #ed0e7a5e;
    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
    color: #fff;
    font-size: 21px;
    padding: 0.25em 0.8em 0.15em;
}
.text{
    color: #00bfff;
    font-size: 22px;
    margin-bottom: 18px;
}
.form{
    display: flex;
    justify-content: center;
}
.input{
    display: inline-block;
    flex-grow: .65;
    margin-right: 15px;
}
.form input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
    width: 100%;
}
.submit-btn {
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transform: rotate(4deg);
    border-radius: 6px;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
}
.submit-btn button {
    position: relative;
    display: block;
    font-size: 16.5px;
    padding: 0.34em 0.84em;
    border: 2px solid #494a4b;
    border-radius: inherit;
    background-color: #fff;
}
.submit-btn:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    transform: scaleY(1.1);
    border: 1px solid #494a4b;
    border-radius: inherit;
    transform-origin: top;
    background-color: #fe7345;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
}
.filed{
    margin-bottom: 20px;
}
</style>